<template>
    <div class="target">
       <div class="target_ranking">
         <p class="ig">NO.1 苏州高新区人民医院</p>
         <p>NO.2 苏州大学附属第一医院</p>
         <p>NO.3 中国人民解放军第101医院</p>
         <p>NO.4 南京同仁医院</p>
         <p>NO.5 南京鼓楼医院</p>
         <p>NO.6 江苏省无锡市惠山区中医医院</p>
         <p>NO.7 苏州大学附属第一医院</p>
         <p>NO.8 苏州市立医院</p>
         <p>NO.9 南京市六合区人民医院</p>
         <p>NO.11 苏州九龙医院</p>
         <p>NO.12 无锡市中医医院</p>
       </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      ti: 0,
      deg: 360
    }
  },
  mounted: function (){
    setInterval(this.transformRotate, 500)
  },
  methods: {
    timer: function () {
      this.display = false
    },
    enter: function () {
      this.display = true
    },
    leave: function () {
      this.display = false
    },
    transformRotate: function () {
      $('.target_ranking p').eq(this.ti).css('transform', 'rotateX('+ this.deg + 'deg)')
      $('.target_ranking p').eq(this.ti).css('transition', 'all 1s ease-out')
      if(this.ti >= $('.target_ranking p').length + 5){
        this.ti = 0
        this.deg = this.deg == 360 ? 0 : 360
      } else {
        this.ti ++
      }
    }
  }
}
</script>

<style scoped>
  .target{
    width: 100%;
    position: fixed;
    min-height: 600px;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:url(../../static/assets/img/home.png) no-repeat center center;
    background-size:cover;
    background-attachment: fixed;
  }
  .target_ranking{
    display: inline-block;
    margin-top: 15%;
    margin-left:5%;
    line-height: 40px;
    font-size: 20px;
    width: 20%;
  }
  .target_ranking p{
    background-image: linear-gradient(to right, #44A6F3, #820EE0,#820EE0);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    line-height: 60px;
    /*animation: bgp 5s infinite linear;*/
  }

</style>
